<template>
  <el-table
    v-loading="loading"
    :data="users" 
    style="width: 100%"
    @expand-change="expandchange"
    height="calc(100% - 48px)"
    border
    ref="tableRef"
    @filter-change="filters => { Object.assign(filterinfo,filters) }"
    :row-key="({id})=>`tablerow-${id}`"
  >
    <el-table-column type="expand">
      <template v-slot="{row:{id}}">
        <el-skeleton :loading="!uinfo[id]" animated>
          <template #template>
            <div class="flex">
              <el-skeleton-item variant="image" class="shrink-0 mx-4" style="width: 200px; height: 200px" />
              <div class="ml-7 w-full flex flex-col justify-evenly">
                <el-skeleton-item variant="p"
                  v-for="width in [56,84,53,76,69,88]"
                  :key="`${id}-loading-${width}`"
                 :style="{width:width+'%'}" />
              </div>
            </div>
            
          </template>
          <template #default>
            <div class="flex">
              <el-avatar shape="square" class="shrink-0 mx-4" :size="200" :src="uinfo[id].ava" />
              <div class="flex flex-col flex-wrap h-48">
                <p 
                  v-for="(value,key) in uinfo[id]"
                  :key="`${id}-${key}`"
                  class="flex justify-between w-48 mr-4"
                >
                  <template v-if="key != 'ava'">
                    <span class="font-bold shrink-0 mr-4">{{key}}</span>
                    <span :title="uinfo[id][key]" class="truncate">{{infofile(uinfo[id][key])}}</span>
                  </template>
                </p>
              </div>
            </div>
          </template>
        </el-skeleton>
      </template>
    </el-table-column>
    <el-table-column label="账户" prop="account" >
      <template #header>
        <el-input v-model="filterinfo.acc" size="small" placeholder="搜索账户" />
      </template>
    </el-table-column>
    <el-table-column label="密码">
      <template v-slot="{ row:{ password } }" >
        <el-tooltip placement="top" effect="light" :show-after="1000" :content="password">
          <i><svg t="1650081548801" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2376" width="24" height="24"><path d="M896.426667 436.949333a611.584 611.584 0 0 0-112.896-136.618666l99.498666-99.498667a42.666667 42.666667 0 1 0-60.330666-60.330667l-682.453334 682.666667a42.666667 42.666667 0 1 0 60.330667 60.330667l108.117333-108.16a389.674667 389.674667 0 0 0 202.965334 56.704c206.037333 0 329.301333-153.6 384.725333-244.906667 27.733333-46.506667 27.733333-103.68 0-150.186667z m-384.768 267.093334a190.037333 190.037333 0 0 1-101.717334-29.994667l62.848-62.890667c12.032 4.736 25.088 7.552 38.826667 7.552a106.666667 106.666667 0 0 0 106.666667-106.666666c0-2.133333 0-3.413333-0.426667-5.546667-5.973333 3.413333-13.226667 5.546667-20.906667 5.546667a41.472 41.472 0 0 1-19.669333-5.418667l96.469333-96.512a190.293333 190.293333 0 0 1 29.824 101.930667c0 105.813333-86.101333 192-191.914666 192z m-327.552-37.546667c-20.906667-24.746667-40.106667-51.626667-56.746667-79.36a146.986667 146.986667 0 0 1-0.426667-150.186667c55.466667-91.306667 179.157333-244.906667 384.725334-244.906666 39.68 0 78.08 5.546667 117.333333 17.493333 7.253333 2.133333 12.8 8.106667 14.933333 15.36 1.706667 7.253333-0.426667 14.933333-5.973333 20.053333l-80.64 80.64c-14.506667-3.413333-29.866667-5.546667-45.653333-5.546666a192.256 192.256 0 0 0-186.368 238.08l-109.653334 109.653333c-4.266667 4.266667-9.386667 6.4-15.36 6.4h-0.853333a21.504 21.504 0 0 1-15.317333-7.68z" fill="#9254DE" p-id="2377"></path><path d="M797.610667 313.344a616.618667 616.618667 0 0 1 98.816 123.605333c11.008 18.517333 17.664 38.741333 19.925333 59.306667L587.946667 824.746667a394.368 394.368 0 0 1-76.288 7.338666c-65.792 0-127.957333-15.872-185.813334-46.933333l101.290667-101.333333c25.472 12.8 54.016 20.266667 84.522667 20.266666 105.813333 0 191.957333-86.186667 191.914666-192 0-30.421333-7.338667-59.093333-20.053333-84.650666z m-179.754667 193.152c0.426667 2.133333 0.426667 3.413333 0.426667 5.546667a106.666667 106.666667 0 0 1-124.501334 105.088L599.04 512a42.410667 42.410667 0 0 0 18.773333-5.504z" fill="#9D65E1" p-id="2378"></path><path d="M822.698667 140.501333a42.666667 42.666667 0 1 1 60.330666 60.330667L783.530667 300.373333c4.821333 4.266667 9.514667 8.661333 14.08 13.013334l-114.133334 114.048a198.357333 198.357333 0 0 0-9.728-17.28l-96.469333 96.512a41.472 41.472 0 0 0 21.76 5.376l-105.258667 105.130666a109.525333 109.525333 0 0 1-20.992-5.973333l-62.848 62.890667c5.546667 3.498667 11.306667 6.741333 17.194667 9.728L325.845333 785.066667a427.093333 427.093333 0 0 1-17.152-9.728l-108.117333 108.16a42.538667 42.538667 0 0 1-60.330667 0 42.666667 42.666667 0 0 1 0-60.330667zM319.744 512.042667c0 15.786667 1.706667 31.146667 5.546667 46.08l-109.653334 109.653333c-4.266667 4.266667-9.386667 6.4-15.36 6.4h-0.853333a21.504 21.504 0 0 1-15.317333-7.68 599.04 599.04 0 0 1-18.474667-22.997333l155.605333-155.605334a192.853333 192.853333 0 0 0-1.493333 24.149334z m309.248-302.506667c7.253333 2.133333 12.8 8.106667 14.933333 15.36 1.706667 7.253333-0.426667 14.933333-5.973333 20.053333l-80.64 80.64a192.64 192.64 0 0 0-69.717333-4.053333L605.866667 203.221333c7.68 1.877333 15.36 3.968 23.125333 6.314667z" fill="#A776E4" p-id="2379"></path><path d="M511.658667 192.042667c31.872 0 62.890667 3.584 94.208 11.178666l-118.272 118.314667a192.469333 192.469333 0 0 0-166.357334 166.4l-155.562666 155.605333a611.669333 611.669333 0 0 1-38.314667-56.405333 146.986667 146.986667 0 0 1-0.426667-150.186667c55.466667-91.306667 179.157333-244.906667 384.725334-244.906666z" fill="#BD98EB" p-id="2380"></path></svg></i>
        </el-tooltip>
      </template>
    </el-table-column>
    <el-table-column
      label="邮箱" 
      prop="email"
      :filters="[
        {text:'已绑定',value:1},
        {text:'未绑定',value:0}
      ]"
      column-key="email"
      :formatter="(row, column, cellValue, index)=>cellValue?cellValue:'未绑定'"
    />
    <el-table-column
      label="实名"
      :filters="[
        {text:'已实名',value:1},
        {text:'未实名',value:0}
      ]"
      column-key="authentic"
    >
      <template v-slot="{ row:{authentic} }">
        <el-tooltip placement="top" v-if="authentic" effect="light" :show-after="1000">
          <template #content>
            <p>姓名：{{authentic.name}}</p>
            <p>身份证号：{{authentic.id}}</p>
          </template>
          <i><svg class="icon" viewBox="0 0 1024 1024" width="24" height="24"><path d="M573.686519 959.317333l0.151703 7.793778s-5.30963-1.194667-14.430815-3.678815c-9.121185 2.484148-14.430815 3.678815-14.430814 3.678815l0.151703-7.793778C470.319407 936.846222 271.872 862.264889 227.555556 693.551407v-388.74074S513.573926 288.749037 559.407407 189.62963c45.833481 99.119407 331.851852 115.181037 331.851852 115.181037v388.74074c-44.316444 168.713481-242.763852 243.294815-317.57274 265.765926z" fill="#0099FF" opacity=".2" p-id="2243"></path><path d="M530.773333 1013.741037L530.962963 1024s-6.97837-1.573926-18.962963-4.854519c-11.984593 3.280593-18.962963 4.854519-18.962963 4.854519l0.18963-10.258963C394.922667 984.139852 134.106074 885.911704 75.851852 663.703704V151.703704s375.902815-21.143704 436.148148-151.703704c60.245333 130.56 436.148148 151.703704 436.148148 151.703704v512c-58.254222 222.208-319.070815 320.436148-417.374815 350.037333zM891.259259 218.415407S560.469333 201.197037 512 94.814815c-48.469333 106.382222-379.259259 123.600593-379.259259 123.600592v417.185186c46.857481 181.077333 275.607704 280.064 354.683259 304.184888l-0.151704 8.362667s5.613037-1.289481 15.246223-3.944296c9.633185 2.654815 15.246222 3.944296 15.246222 3.944296l-0.151704-8.362667c79.075556-24.120889 326.788741-123.107556 373.646222-304.184888v-417.185186zM474.548148 649.53837l-40.087704-40.087703-0.13274-0.132741-120.680297-120.680296 53.62726-53.646223 120.680296 120.680297 187.733333-187.714371 53.62726 53.62726L487.954963 662.945185l-13.406815-13.406815z" fill="#0099FF" p-id="2244"></path></svg></i>
        </el-tooltip>
        <svg v-else t="1650079638769" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7232" width="24" height="24"><path d="M759.39456 737.5936c-15.488 0-30.94656-2.0672-45.94944-6.14016a23.05536 23.05536 0 0 0-24.02432 7.79904c-46.1568 57.4336-114.81728 90.3744-188.3648 90.3744-72.1536 0-139.97184-31.88736-186.07104-87.47648a23.0464 23.0464 0 0 0-17.7536-8.34048c-1.25568 0-2.52928 0.09728-3.80416 0.31104-9.72288 1.62944-19.50464 2.45376-29.056 2.45376-96.35456 0-174.7392-78.33088-174.7392-174.62016 0-91.97056 71.88224-168.49792 163.65568-174.22848a23.04512 23.04512 0 0 0 20.75648-16.74496C303.22688 267.48672 398.8096 195.20512 506.47424 195.20512c107.94624 0 203.58784 72.5184 232.59776 176.35328 2.75456 9.88416 11.72352 16.75008 21.98912 16.84864 95.43296 0.88704 173.06752 79.2064 173.06752 174.57408 0 96.27776-78.38336 174.61376-174.7328 174.61376m19.09504-394.44992C738.92736 228.10496 629.39648 149.12384 506.47424 149.12384c-122.8992 0-232.56832 79.0784-272.07552 194.19776C126.14144 358.02112 43.52128 451.12064 43.52128 561.95456 43.52 683.65184 142.592 782.65472 264.3712 782.65472c7.80928 0 15.712-0.43264 23.62624-1.28512 54.54976 60.11136 131.4688 94.33728 213.056 94.33728 82.68416 0 160.16384-34.94016 214.81728-96.3648a220.99072 220.99072 0 0 0 43.52256 4.33152c121.77536 0 220.8448-99.00288 220.8448-220.69376 0-114.82624-89.04064-210.09024-201.74848-219.83616" fill="#5050B2" p-id="7233"></path><path d="M511.8848 660.08832c-14.624 0-26.48064 11.84768-26.48064 26.46144 0 14.61248 11.85664 26.45504 26.47936 26.45504 14.624 0 26.47936-11.84256 26.47936-26.45504 0-14.61376-11.85536-26.46144-26.47936-26.46144M511.8848 340.76672c-39.5584 0-75.81952 19.95776-97.01376 53.3952-11.60832 18.32192-17.7408 39.5136-17.7408 61.28 0 12.7232 10.3232 23.04 23.05536 23.04 12.73216 0 23.05536-10.3168 23.05536-23.04 0-13.02912 3.66592-25.69472 10.58816-36.6272 12.68736-20.02176 34.38848-31.968 58.0544-31.968 37.84576 0 68.64256 30.77504 68.64256 68.5952 0 37.82656-30.7968 68.5952-68.64256 68.5952-12.73216 0-23.05536 10.3168-23.05536 23.04v67.19744c0 12.7232 10.3232 23.04 23.05536 23.04 12.73344 0 23.05664-10.3168 23.05664-23.04v-46.4832c52.26112-10.69696 91.69792-57.00736 91.69792-112.34944 0-63.22688-51.47776-114.6752-114.75456-114.6752" fill="#5050B2" p-id="7234"></path></svg>
      </template>
    </el-table-column>
    <el-table-column 
      label="用户类型" 
      :filters="[
        {text:'参赛者',value:1},
        {text:'发布者',value:0}
      ]"
      column-key="type"
    >
      <template v-slot="{ row:{type} }">
        <svg v-if="type" t="1650083165254" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11547" width="28" height="28"><path d="M268 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11548"></path><path d="M268 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11549"></path><path d="M294 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11550"></path><path d="M294 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11551"></path><path d="M320 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11552"></path><path d="M320 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11553"></path><path d="M346 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11554"></path><path d="M346 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11555"></path><path d="M372 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11556"></path><path d="M372 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11557"></path><path d="M398 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11558"></path><path d="M398 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11559"></path><path d="M424 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11560"></path><path d="M424 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11561"></path><path d="M450 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11562"></path><path d="M450 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11563"></path><path d="M476 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11564"></path><path d="M476 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11565"></path><path d="M502 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11566"></path><path d="M502 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11567"></path><path d="M528 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11568"></path><path d="M528 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11569"></path><path d="M554 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11570"></path><path d="M554 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11571"></path><path d="M580 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11572"></path><path d="M580 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11573"></path><path d="M606 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11574"></path><path d="M606 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11575"></path><path d="M632 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11576"></path><path d="M632 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11577"></path><path d="M658 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11578"></path><path d="M658 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11579"></path><path d="M684 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11580"></path><path d="M684 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11581"></path><path d="M710 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11582"></path><path d="M710 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11583"></path><path d="M736 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11584"></path><path d="M736 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11585"></path><path d="M762 294m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11586"></path><path d="M762 322m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z" fill="#FF4B07" p-id="11587"></path><path d="M272 292c-11.028 0-20 8.972-20 20v440c0 11.03 8.972 20 20 20h480c11.03 0 20-8.97 20-20V312c0-11.028-8.97-20-20-20H272m0-60h480c44.184 0 80 35.818 80 80v440c0 44.184-35.816 80-80 80H272c-44.182 0-80-35.816-80-80V312c0-44.182 35.818-80 80-80z" fill="#4760AD" p-id="11588"></path><path d="M225 323h578v60h-578zM352 314c-16.568 0-30-13.432-30-30v-62c0-16.568 13.432-30 30-30s30 13.432 30 30v62c0 16.568-13.432 30-30 30zM672 314c-16.568 0-30-13.432-30-30v-62c0-16.568 13.432-30 30-30s30 13.432 30 30v62c0 16.568-13.432 30-30 30z" fill="#4760AD" p-id="11589"></path><path d="M512 828c-16.568 0-30-13.432-30-30V358c0-16.568 13.432-30 30-30s30 13.432 30 30v440c0 16.568-13.432 30-30 30z" fill="#4760AD" p-id="11590"></path><path d="M358 459.04c26.668 0 47.466 11.094 62.4 33.28 14.08 21.122 21.122 49.6 21.122 85.44 0 35.842-7.042 64.32-21.122 85.442-15.146 22.186-35.948 33.28-62.4 33.28-26.878 0-47.68-11.094-62.4-33.28-14.08-21.122-21.12-49.6-21.12-85.442 0-35.84 7.04-64.318 21.12-85.44 14.506-22.186 35.306-33.28 62.4-33.28z m0 31.68c-18.346 0-31.146 10.132-38.4 30.4-5.12 13.652-7.68 32.534-7.68 56.638 0 23.682 2.56 42.56 7.68 56.64 7.466 20.268 20.268 30.4 38.4 30.4 17.92 0 30.72-10.132 38.4-30.4 5.12-14.08 7.68-32.958 7.68-56.64 0-24.106-2.56-42.986-7.68-56.638-7.68-20.266-20.48-30.4-38.4-30.4zM666 459.04c26.668 0 47.466 11.094 62.4 33.28 14.08 21.122 21.122 49.6 21.122 85.44 0 35.842-7.042 64.32-21.122 85.442-15.146 22.186-35.948 33.28-62.4 33.28-26.878 0-47.68-11.094-62.4-33.28-14.078-21.122-21.12-49.6-21.12-85.442 0-35.84 7.042-64.318 21.12-85.44 14.506-22.186 35.306-33.28 62.4-33.28z m0 31.68c-18.346 0-31.146 10.132-38.4 30.4-5.12 13.652-7.68 32.534-7.68 56.638 0 23.682 2.56 42.56 7.68 56.64 7.466 20.268 20.268 30.4 38.4 30.4 17.92 0 30.72-10.132 38.4-30.4 5.122-14.08 7.68-32.958 7.68-56.64 0-24.106-2.558-42.986-7.68-56.638-7.68-20.266-20.48-30.4-38.4-30.4z" fill="#FF4B07" p-id="11591"></path></svg>
        <svg v-else t="1650083115960" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="831" width="28" height="28"><path d="M598 474a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM630 474a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM662 474a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM694 474a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM726 474a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM758 474a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM598 506a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM630 506a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM662 506a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM694 506a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM726 506a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM758 506a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM598 538a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM630 538a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM662 538a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM694 538a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM726 538a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM758 538a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM598 570a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM630 570a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM662 570a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM694 570a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM726 570a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM758 570a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM598 602a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM630 602a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM662 602a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM694 602a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM726 602a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM758 602a10 10 0 1 1 0 20 10 10 0 0 1 0-20z" fill="#FF4B07" p-id="832"></path><path d="M486.822 492c-14.5 0-26.294 11.796-26.294 26.294 0 12.424 18.556 24.476 35.148 26.954l5.586 0.832 5.334 1.864 265.406 92.644v-143.866A4.728 4.728 0 0 0 767.28 492H486.822m0-60H767.28c35.744 0 64.722 28.976 64.722 64.722v228.36l-345.18-120.492c-41.914-6.254-86.294-38.634-86.294-86.294-0.002-47.66 38.634-86.296 86.294-86.296z" fill="#FF4B07" p-id="833"></path><path d="M542 504c12.15 0 22 9.85 22 22s-9.85 22-22 22-22-9.85-22-22 9.85-22 22-22z" fill="#4860AE" p-id="834"></path><path d="M711.376 832c-2.884 0-5.756-0.416-8.524-1.236l-489.376-145A30 30 0 0 1 192 657V512c0-176.448 143.552-320 320-320 176.45 0 320 143.552 320 320v199.376C832 777.888 777.888 832 711.376 832zM252 634.6l463.302 137.276c31.608-2.03 56.698-28.39 56.698-60.5V512c0-143.364-116.634-260-260-260-143.364 0-260 116.636-260 260v122.6z" fill="#4860AE" p-id="835"></path></svg>
      </template>
    </el-table-column>
    <el-table-column 
      label="状态"
      :filters="[
        {text:'使用中',value:1},
        {text:'已注销',value:0}
      ]"
      column-key="isUse"
    >
      <template v-slot="{ row:{isUse} }">
        <el-tag v-if="isUse" type="success">使用中</el-tag>
        <el-tag v-else type="danger">已注销</el-tag>
      </template>
    </el-table-column>
  </el-table>
  <div class=" bg-white p-2 text-right h-12">
    <el-pagination
    v-model:currentPage="filterinfo.pages"
    v-model:page-size="filterinfo.length"
    :default-page-size="10"
    :page-sizes="[10, 15, 20, 25]"
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  />
  </div>
</template>

<script lang="ts" setup >
import { selectuser,getuserinfo } from '@/api/oper'
import { onMounted, reactive, ref, toRaw, watch } from 'vue'
import type { ElTable } from 'element-plus'
import { debounce } from 'lodash'
let users = ref([])
let total = ref(0)
const tableRef = ref<InstanceType<typeof ElTable>>()
let loading = ref(false)
const filterinfo = reactive({
  //过滤
  acc:'',
  email:[],
  authentic:[],
  type:[],
  isUse:[],
  //页面
  pages:1,
  length:10
})

const infofile = value => value?value:'(NULL)'
const debounce_get = debounce(()=>{
  loading.value = true
  selectuser(filterinfo).then(e=>{ 
    users.value = e.users
    total.value = e.total
    setTimeout(()=>{
      loading.value = false
    },200)
  }).catch(()=>{loading.value = false})
},500)

watch([filterinfo,filterinfo],()=>debounce_get())

onMounted(()=>{
  loading.value = true
  debounce_get()
})


let uinfo = ref({})
const expandchange = async({id:uid},all) => {
  const oper = all.map(e=>e.id).includes(uid)//展开还是收回?
  if(oper){
    const {uinfo:req} = await getuserinfo({uid})
    setTimeout(()=>{
      uinfo.value[uid] = req
    },500)
  }else{
    delete uinfo.value[uid]
  }
}
</script>


<style lang="scss" scoped>
//table
::v-deep .cell{
  white-space: nowrap !important;
  display: flex;
  align-items: center;
}
</style>